<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">服务登记</block>
		</cu-custom>
		<view class="cu-modal" :class="modalName == 'DialogModal2' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="">
						<view class="radius shadow shadow-lg bg-white det_topsss">
							<view class="detail-left detail-inner" style="padding: 0 30rpx">
								服务项目与服务对象不匹配，请确认以后再提交
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal('DialogModal2')">
							我知道了
						</button>
						<!-- <button class="cu-btn bg-blue margin-left" @tap="hideModal">提交</button> -->
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认登记</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="">
						<view class="radius shadow shadow-lg bg-white det_topsss">
							<view class="det_topsss_inner">
								<view v-if="
                    item.serviceItemIcon.mode == 'local' ||
                    item.serviceItemIcon.mode == 'sysIcon'
                  ">
									<view class="current-item-img instant-item-inner">
										<image :src="item.serviceItemIcon.picUrl" mode="" style="margin-bottom: 12rpx"></image>
									</view>
									<view class="current-item-content" style="text-align: center">
									</view>
								</view>
								<view class="current-item-content-diy" v-if="item.serviceItemIcon.mode == 'diy'" style="font-size: 40rpx">
									<view class="top" :style="{
                      color: item.serviceItemIcon.fontColor,
                      background: item.serviceItemIcon.bacColor,
                    }">{{ item.serviceItemIcon.word }}</view>
									<view class="bottom">{{ item.serviceItemName }}</view>
								</view>
							</view>
							<view class="detail-right detail-inner det_topsss_right">
								<view>服务对象</view>
								<view class="detail-content" v-if="showItem != null">
									{{ showItem.preName }}:{{ showItem.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal('DialogModal1')">
							取消
						</button>
						<button class="cu-btn bg-blue margin-left" @tap="realSubmit(item)">
							提交
						</button>
					</view>
				</view>
			</view>
		</view>

		<!-- card -->
		<view class="padding-sm" @click="content(item)">
			<view class="radius shadow padding-sm shadow-lg bg-white det_top">
				<view class="detail">
					<block v-if="
              item.serviceItemIcon.mode == 'local' ||
              item.serviceItemIcon.mode == 'sysIcon'
            ">
						<image class="detail-img" :src="item.serviceItemIcon.picUrl" mode=""></image>
					</block>
					<view class="detail-img detail-img-diy" v-if="item.serviceItemIcon.mode == 'diy'" style="" :style="{
              color: item.serviceItemIcon.fontColor,
              background: item.serviceItemIcon.bacColor,
            }">
						{{ item.serviceItemIcon.word }}
					</view>
					<text class="detail-content">{{ item.serviceItemName }}</text>
				</view>
			</view>
		</view>
		<view class="padding-sm">
			<view class="radius shadow padding-sm shadow-lg bg-white det_top">
				<view>
					<!-- 复选框 -->
					<view class="goods" v-if="item.useItem">
						<label @click="changeValue(item)">
							<checkbox style="transform: scale(0.7)" class="blue" :class="value ? 'checked' : ''" :checked="value" /><text>需要使用物品</text>
						</label>
						<block v-if="value">
							<input class="left" v-model="item.useItem" type="text" />
							<input class="right" v-model="item.useNum" type="number" v-if="item.useNum != undefined" />
							<input class="right" v-model="item.useNum" type="number" v-if="item.useNum == undefined" />
							<text>件</text>
						</block>
					</view>
				</view>
				<!-- 单选多选 -->
				<view
				  v-if="item.customItem.length != 0"
				  v-for="(it, indexs) in item.customItem"
				  :key="indexs"
				>
				  <view class="assist" v-if="it.classify == '单选'">
				    <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
				    <radio-group name="" class="inner-right">
				      <view
				        class="right"
				        v-for="(radio, radioIndex) in it.option"
				        :key="radioIndex"
				      >
				        <label>
				          <radio
				            style="transform: scale(0.7)"
				            v-model="it.value"
				            :checked="it.value == radio ? true : false"
				          /><text @click="readName(radio)">{{ radio }}</text>
				        </label>
				      </view>
				    </radio-group>
				  </view>
				  <view class="assist" v-if="it.classify == '多选'">
				    <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
				    <view
				      class="right"
				      v-for="(radio, radioIndex) in it.value"
				      :key="radioIndex"
				    >
				      <label @click="radio.checked = !radio.checked" class="inner-right">
				        <checkbox
				          class="blue"
				          style="transform: scale(0.7)"
				          :class="radio.checked ? 'checked' : ''"
				          :checked="radio.checked ? true : false"
				          v-model="radio.value"
				        /><text @click="readName(radio.label)">{{ radio.label }}</text>
				      </label>
				    </view>
				  </view>
				  <view
				    class="textarea"
				    v-if="it.classify == '文字输入'"
				    style="display: flex"
				  >
				    <view class="inner"  @click="readName(it.title)">{{ it.title }}：</view>
				    <textarea v-model="it.value" placeholder="请输入文字" class="textarea-inner"/>
				  </view>
				</view>
      </view>
    </view>
    <view class="padding-sm" @click="readRemark">
      <view
        class="radius shadow padding-sm shadow-lg bg-white det_top notes_outer"
      >
        <view class="left"> 登记备注: </view>
        <view class="notes">
          <input
            type="text"
            v-model="item.recordRemark"
            placeholder="请输入服务登记备注内容"
            placeholder-style="font-size:28rpx"
          />
        </view>
      </view>
    </view>

    <view class="success" @click="saoma">
      <view class="success-left">
        <image src="../../../static/img/u35.png" mode=""></image>
      </view>
      <view class="success-right">
        您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      customItem: [],//
      value: true,////是否展示
      item: {},//上个页面
      modalName: "",//不同弹框
      serviceTarget: "",//分类
      showItem: {}, //展示的项目
    };
  },
  onShow() {},
  onLoad(options) {
    this.item = JSON.parse(options.item);
    this.item.recordRemark = "";
    this.item.teamId = uni.getStorageSync("teamId");
    this.serviceTarget = this.item.serviceTarget; //类型
    if (this.item.useNum == undefined) {
      this.item.useNum = 1;
    }
	// this.item.customItem = options.data;
    let data = JSON.parse(this.item.customItem);
	this.item.customItem = data;
    // for (let item of data) {
    //   for (let items of item.value) {
    //     if (items.checked == undefined) {
    //       items.checked = false;
    //     }
    //   }
    // }
  
    const that = this;
    uni.$on("NFC_READ", function (msg) {
      that.readCard(msg.rfid);
    });
  },
  onUnload() {
    // 移除监听事件
    uni.$off("NFC_READ");
  },
  onHide() {},
  methods: {
	  readName(name){
	  		  if(this.$store.state.state&&this.$store.state.isphone){
	  		  	getApp().globalData.TTSSpeaker.stop();
	  		  	getApp().globalData.TTSSpeaker.speak(name,1);
	  		  }	
	  },
	 saoma(){
		 if(this.$store.state.state&&this.$store.state.isphone){
		 	getApp().globalData.TTSSpeaker.stop();
		 	getApp().globalData.TTSSpeaker.speak(' 您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作',1);
		 }	
	 },
	 readRemark(){
		 if(this.$store.state.state&&this.$store.state.isphone){
		 	getApp().globalData.TTSSpeaker.stop();
		 	getApp().globalData.TTSSpeaker.speak('登记备注，请输入服务登记备注内容。',1);
		 }	
	 },
	 content(item){
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak(item.serviceItemName,1);
		}	 
	 },
    changeValue(item) {
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak('需要使用物品',1);
		}	
      this.value = !this.value;
      if (!this.value) {
        this.item.useItem = "";
        this.item.useNum = "";
      }
    },
    readCard(id) {
		
	  if(this.$store.state.state&&this.$store.state.isphone){
	  	getApp().globalData.TTSSpeaker.stop();
	  	getApp().globalData.TTSSpeaker.speak('服务项目为'+this.item.serviceItemName+'确认无误后可进行登记提交。',1);
	  }	
      this.$http(
        "/implement-service/implement/getByRfidCardIdForService",
        "get",
        {
          rfidCardId: id,
        }
      ).then((res) => {
        console.log(res, "88888");
        if (res.data.code == 200) {
          let data = res.data.data;
          if (data == undefined) {
            uni.showToast({
              icon: "none",
              title: "这是个空标签",
            });
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('这是个空标签',1);
			}
          } else if (data.serviceTarget == this.serviceTarget) {
            this.showItem = res.data.data.serviceObject;
            this.item.areaSiteId = res.data.data.serviceObject.id;
            // this.showModal("DialogModal1");
			this.realSubmit(this.item);
          } else if (data.serviceTarget != this.serviceTarget) {
			  if(this.$store.state.state&&this.$store.state.isphone){
			  	getApp().globalData.TTSSpeaker.stop();
			  	getApp().globalData.TTSSpeaker.speak('服务项目与服务对象不匹配',1);
			  }
			uni.showToast({
			    title: '服务项目与服务对象不匹配',
				icon:'none',
			    duration: 1500,
			});
          }
        }
      });
    },
    changeRadio(item, index) {
      this.customItem[index].value = item;
	   console.log(this.customItem,99999999)
    },
    submit(item) {
      this.item.customItem = this.customItem;
    },
    realSubmit(item) {
      var _that = this;
      if (this.serviceTarget == 0) {
        let oldServiceRecordQueryList = [
          {
            customItem: _that.item.customItem,
            employeeId: uni.getStorageSync("employeeId"),
            oldBaseId: this.item.areaSiteId,
            recordRemark: _that.item.recordRemark,
            serviceCycle: "0",
            serviceItemId: _that.item.id,
            teamId: uni.getStorageSync("teamId"),
            timeRange: "11",
            useItem: _that.item.useItem,
            useNum: _that.item.useNum,
          },
        ];
        let params = {
          oldServiceRecordQueryList,
        };
        params = JSON.stringify(params);
        this.$http("/care-service/oldServiceRecord/save", "post", params).then(
          (res) => {
            if (res.data.code == 200) {
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak('刷卡提交成功',1);
				}
				uni.showToast({
				    title: '刷卡提交成功',
					icon:'none',
				    duration: 1500,
				});
				setTimeout(function(){
					uni.switchTab({
					    url: '/pages/basics/index'
					});
				},1500)
            } else {
              this.hideModal("DialogModal1");
             if(this.$store.state.state&&this.$store.state.isphone){
             	getApp().globalData.TTSSpeaker.stop();
             	getApp().globalData.TTSSpeaker.speak('提交失败',1);
             }else{
				 uni.showToast({
				   title: "提交失败",
				   duration: 2000,
				   icon:'none'
				 });
			 }	
            }
          }
        );
      } else if (this.serviceTarget == 2) {
        let siteServiceRecordQueries = [
          {
            customItem: _that.item.customItem,
            employeeId: uni.getStorageSync("employeeId"),
            areaSiteId: this.item.areaSiteId,
            recordRemark: _that.item.recordRemark,
            serviceCycle: "0",
            serviceItemId: _that.item.id,
            teamId: uni.getStorageSync("teamId"),
            timeRange: "11",
            useItem: _that.item.useItem,
            useNum: _that.item.useNum,
          },
        ];
        let params = {
          siteServiceRecordQueries,
        };
        params = JSON.stringify(params);
        this.$http("/care-service/areaService/save", "post", params).then(
          (res) => {
            if (res.data.code == 200) {
              this.hideModal("DialogModal1");
			  if(this.$store.state.state&&this.$store.state.isphone){
			  	getApp().globalData.TTSSpeaker.stop();
			  	getApp().globalData.TTSSpeaker.speak('您已完成'+this.item.serviceItemName+'的提交。',1);
			  		setTimeout(function(){
			  		uni.switchTab({
			  			url:'/pages/service/index'
			  			})
			  				},5000)
					}else{
						uni.showToast({
						title: "提交成功",
						duration: 2000,
						icon:'none'
						});
						setTimeout(function(){
							 uni.switchTab({
							url:'/pages/service/index'
						 })
						},3000)
					}
             
            } else {
              this.hideModal("DialogModal1");
              if(this.$store.state.state&&this.$store.state.isphone){
              	getApp().globalData.TTSSpeaker.stop();
              	getApp().globalData.TTSSpeaker.speak('提交失败',1);
              }else{
              		uni.showToast({
              	  title: "提交失败",
              		  duration: 2000,
					  icon:'none'
              		 });
              }	
            }
          }
        );
      }
    },
    showModal(item) {
      this.modalName = item;
    },
    hideModal(e) {
      this.modalName = null;
    },
  },
};
</script>
<style scoped lang="scss">
.cu-tag {
				height: 36rpx;
				margin: 0 15rpx;
			}
			page{
				background-color: #f2f2f2;
			}
			
			.detail{
				display: flex;
				align-items: center;			
				.detail-img{
					width:100rpx;
					height: 100rpx;
					margin-right: 70rpx;
				}
				font-size:34rpx;
				color: #333333;
			}
		
		.service{
			padding:20rpx;
			display: flex;
			.left{
				flex:1;
				margin-right:20rpx;
				text-align: center;
			}
			.right{
				flex:3;
			}
		}
		.goods{
			display: flex;
		}
		.goods{
			.left{
				width:200rpx;
				height:30rpx;
				line-height:30rpx;
				text-align: center;
				padding:0 20rpx;
				background-color: #F2F2F2;
				margin: 0 30rpx;
				border-radius:15rpx;
			}
			.right{
				width:100rpx;
				height:30rpx;
				border-radius:15rpx;
				line-height:30rpx;
				padding:0 20rpx;
				text-align: center;
				background-color: #F2F2F2;
				margin-right:12rpx;
			}
		}
		.assist {
		  margin: 30rpx 0;
		  display: flex;
		  align-items: center;
		  .inner{
		  }
		  .right {
		    flex: 1;
		  }
		  .inner-right{
				flex: 1;
				display: flex;
				align-items: center;
			}
		}
		.trun-position{
			margin:30rpx 0;
			display: flex;
			align-items: center;
			.right{
				flex: 1;
				text-align: left;
			}
		}
		.dengji{
			font-size:34rpx;
			margin-bottom:12rpx;
		}
		.notes_outer{
			display: flex;
			align-items: center;
			.left{
				margin-right:30rpx;
			}
			.notes{
				border: 2rpx solid #AAAAAA;
				height:70rpx;
				flex: 1;
				display: flex;
				align-items: center;
				border-radius:10rpx;
				input{
					width:100%;
					box-sizing: border-box;
					padding:0 10rpx;
					line-height:70rpx;
				}
				
			}
			
		}
	
		
		.det_topsss{
			font-size:34rpx;
			.detail-content{
				margin-top: 30rpx;
			}
			display: flex;
			.detail-inner{
				flex: 1;
			}
			.detail-left{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.detail-img{
					width:70rpx;
					height:70rpx;
				}
			}
			.detail-right{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-left: 1rpx solid #AAAAAA;
			}
			.detail-img{
				width:60rpx;
				height:60rpx;
			}
			
		}
	.textarea{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		
		textarea{
			border: 1rpx solid #CCCCCC;
			border-radius: 5rpx;
			padding: 20rpx;
		}
	}
	.success{
		display: flex;
		padding:20rpx 30rpx;
		background-color: #FFFFFF;
		.success-left{
			margin-right:30rpx;
			image{
				width:60rpx;
				height: 60rpx;
			}
		}
	}
	.detail-img-diy{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #333333;
	}
	
	.current-item-img{
		position: relative;
		image{
			width:100rpx;
			height:100rpx;
		}
		.current-item-position{
			width:32rpx;
			height:32rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			background-color:red;
			border-radius:100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position:absolute;
			right: -10rpx;
			top: -10rpx;
		}
	}
	.instant-item-inner{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.det_topsss_inner{
		flex: 1;
	}
	.det_topsss_right{
		flex: 4;
	}
	
	.current-item-content-diy{
		width: 200rpx;
		.top{
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 12rpx;
		}
		.bottom{
			margin-top: 20rpx;
		}
	}
	.det_topsss_inner{
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
